<template>
  <!-- 专刊详情页面     -->
  <page-wrap
    :show-top="showTop"
    :dark="false"
    darkTxtColor="#222"
    back
    bg-color="#021933"
    hideTab
    :title="dynamicTtitle"
  >
    <view class="wrapper">
     
      <view class="top">
        <view class="publication-top" :style="'height:' + bgHeight + 'px;'">
          <view class="title">
            <p class="mainTitle">
              <img
                src="https://upload.yl1001.com/upload/images/view?file=E78,x9K,kN3Fo9/sKP6Rv9ni/sN_qNWp7lmtssutkNhjn=utO-vBKQlMTSe1F.png"
              />
              <span>{{ publicationInfo.issueName }}</span>
            </p>
            <p class="subTitle">{{ publicationInfo.copyIssueName }}</p>
          </view>
          <view class="image">
            <image
              :src="publicationInfo.issueCover"
              @click="previewImg(publicationInfo.issueCover)"
            ></image>
          </view>
        </view>
      </view>
      <view class="main-content">
        <view class="blank" :style="'height:' + (blockHeight - 22) + 'px;'">
          <view class="control-table controlCard">
            <view class="desc">{{ publicationInfo.issueDesc }}</view>
            <view class="buttons">
              <button class="more" @click.native="handleMoreClick">
                <img
                  src="https://upload.yl1001.com/upload/images/view?file=ibvqSSzwblm6c,Z9fucmd4W7HAGHmptSH5-u,rGTGAdxbm=GA9GqzW9ryNLZ5.png"
                  alt=""
                />
                更多专刊
              </button>
              <button class="share btn-share" open-type="share">
                <img
                  src="https://upload.yl1001.com/upload/images/view?file=siRxtiOSjTzcNKhW3KAacd0lcONrdUvtIIUIj7IiI_PpC0agY,KhyDgF0ZAwI.png"
                  alt=""
                />
                分享
              </button>
            </view>
          </view>
        </view>
        <view class="articleTotlal"> 全部文章（{{ sums }}） </view>
        <publicationArticleList 
          :list="articleList"  
        />

        <u-loadmore
      v-if="articleList.length>0 || !loaded"
      class="list-more"
      :status="moreLoading"
      :load-text="loadText"
    />
    <Empty
      v-if="loaded &&  articleList.length<=0"
      :baseImg="emptyImg"
      text="暂无相关内容"
      :fontWeight="400"
      class="empty"
    />
       
      </view>
    
  </view>
    <u-loading :show="loading"></u-loading>
  </page-wrap>
</template>

<script>
import { getSpecialIssueById } from "@/api/modules/career";
import publicationArticleList from "@/pagesSub/career/components/publicationArticleList";
import ShareMixin from "@/mixins/share"; 
import { showDelayToastTip } from "@/utils/handle";
import { specialIssueMidList } from "@/api/modules/career";
import Empty from '@/components/Empty.vue'

export default {
  name: "publicationDetail",
  components: {
    publicationArticleList, 
    Empty,
  },
  mixins: [ShareMixin ],
  data() {
    return {
      defaultBg: this.$imgBaseSelf + "consultant/top-banner.png",
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      bgHeight: getApp().globalData.navHeight + uni.upx2px(350),
      issueId: "",
      showTop: false,
      // shareTitle: this.$selfName,
      // sharePath: "/pages/index/index",
      // imageUrl: "",
      coverImg:
        "http://img3.job1001.com/ypMp/elan/images/career/zhuanfa_red.png",
      dynamicTtitle: " ",
      loading: false,
      publicationInfo: { careerInfoResVos: [] },
      blockHeight: 108,
      ownId: "24396953",

      screenHeight: 0,
      screenWidth: 0,
      sums: 0,
      articleList: [],
      emptyImg: this.$imgBaseSelf + "common/empty_1.png",
      pageParams: {
        pageNo: 1,
        pageSize: 20,
      },
      moreLoading: "loadmore",   
      loadText: {
        loadmore: "已经到底啦",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      loaded: false, 
    };
  },

  onLoad(opt) {
    // 适配二维码扫码跳转
    if (opt.q) {
      let paramStr = decodeURIComponent(opt.q).split("?");
      this.optionUrl = decodeURIComponent(opt.q);
      let resObj = {};
      if (paramStr[1]) {
        paramStr[1].split("&") &&
          paramStr[1].split("&").forEach((item) => {
            resObj[item.split("=")[0]] = item.split("=")[1];
          });
      }
      if (resObj.hasOwnProperty("id")) {
        this.issueId = resObj.id;
      }
    } else {
      this.issueId = opt.id;
    }
    this.sharePath =
      "/pagesSub/career/careerInfo/publicationDetail?id=" + this.issueId;
    this.shareQuery = "id=" + this.issueId;
   // this.reqGetSpecialIssueById();
   // this.loadMore();  
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "",
    });
  },

  onReady() {
    let systemInfo = uni.getSystemInfoSync();
    this.screenHeight = systemInfo.windowHeight;
    this.screenWidth = systemInfo.windowWidth;
  },
  mounted() {
    this.reqGetSpecialIssueById();
    this.loadMore(); 
  },

  onPageScroll(res) {
    this.showTop = res.scrollTop > 0;
    if (res.scrollTop > 0) {
      this.dynamicTtitle = this.publicationInfo.issueName;
    } else {
      this.dynamicTtitle = " ";
    }
    this.scrollTop = res.scrollTop;
    // this.filterFixed = res.scrollTop > this.navHeight;
    this.filterFixed = res.scrollTop > 1;
     
  },
 
  // 监听页面滚动到底部
  onReachBottom(){
    this.loadMore(); 
  },
  methods: {
    resizeBlockHeight() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".controlCard")
        .boundingClientRect((data) => {
          console.log(data);

          this.blockHeight = data.height;
        })
        .exec();
    },
    handleMoreClick() {
      //24396953是一览通账户的id
      uni.navigateTo({
        url: `/pagesSub/career/consultant/index?id=${this.ownId}&toPublication=1`,
        success: (res) => {
          console.log(res);
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    loadMore() {
      if (this.moreLoading == "loading" || this.moreLoading == "nomore") return;

      this.reqSpecialIssueMidList(true);
    },
    reqSpecialIssueMidList(isMore) {
      const params = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        personId: this.personId,
        issueId: this.issueId,
      };
      if(params.personId==undefined){
        params.personId = "0";
      }
      console.log(params);
      this.loading = true;
      this.moreLoading = 'loading';
     // uni.showLoading({ title: "加载中", mask: true });
      specialIssueMidList(params)
        .then((res) => {
          this.loaded = true;
          this.moreLoading = "loadmore";
          console.log(res);
          if (res.code == 200) {
            if (res.data == null) {
              // 小程序专刊详情接口，code= 200且 data=null 表示 专刊被删除
              showDelayToastTip("该专刊已被删除", 200);
              return;
            }
            this.sums = res.pageparam.sums;
            if (isMore) { 
              this.articleList.push(...res.data);
            } else {
              this.articleList = res.data;
            }

            if (this.pageParams.pageNo >= res.pageparam.pages) {
              this.moreLoading = "nomore";
            }
            this.pageParams.pageNo++;
          } else {
            this.moreLoading = 'nomore'; 
            showDelayToastTip(res.status_desc, 0);
          }
        })
        .catch((e) => {
          console.log(e);
          this.moreLoading = 'nomore';
          showDelayToastTip("获取专刊的职讯列表失败！", 0);
        })
        .finally(() => {
          this.loading = false;
          //uni.hideLoading();
        });
    },

    // 获取专刊详情接口
    reqGetSpecialIssueById() {
      const params = {
        personId: this.personId || 23539031,
        issueId: this.issueId,
      };
      this.loading = true;
      uni.showLoading({ title: "加载中", mask: true });
      getSpecialIssueById(params)
        .then((res) => {
          if (res.code == 200) {
            if (res.data == null) {
              // 小程序专刊详情接口，code= 200且 data=null 表示 专刊被删除
              showDelayToastTip("该专刊已被删除", 200);
              return;
            }
            this.publicationInfo = res.data;
            this.shareTitle =
              res.data.issueName + ` - ` + res.data.copyIssueName;
            this.imageUrl = res.data.issueCover;
            this.ownId = res.data.ownId;
            this.$nextTick(() => {
              this.resizeBlockHeight();
            });
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .catch((e) => {
          console.log(e);
          uni.showToast({
            title: "获取专刊信息失败！",
            icon: "none",
          });
        })
        .finally(() => {
          this.loading = false;
          uni.hideLoading();
        });
    },
    previewImg(img) {
      if (img) {
        let imgsArray = [];
        imgsArray[0] = img;
        uni.previewImage({
          current: 0,
          urls: imgsArray,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  background-color: #fff;
  .top {
    .publication-top {
      display: flex;
      justify-content: space-between;
      background-image: url("https://upload.yl1001.com/upload/images/view?file=mXmJ1PEfZ3WZkdCtZ8XtAmBbO5,roHPJW1C=awocMGoZxn,ZAYrtFTXdmDSwm.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      padding: 210rpx 64rpx 0;
      view {
        // max-width: 50%;
      }
      .title {
        color: #f5f5f5;
        font-size: 32rpx;
        max-width: 60%;
        .mainTitle {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #dddddd;
          line-height: 36rpx;
          margin-bottom: 34rpx;
          img {
            width: 32rpx;
            height: 32rpx;
            margin-right: 12rpx;
          }
        }
        .subTitle {
          width: 386rpx;
          height: 88rpx;
          font-size: 32rpx;
          font-family: PingFang-SC-Bold, PingFang-SC;
          font-weight: bold;
          color: #ffffff;
          line-height: 44rpx;
        }
        p {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -moz-box-orient: vertical;
          overflow: hidden;
          word-break: break-all;
        }
      }
      .image {
        width: 160rpx;
        height: 160rpx;

        border-radius: 16rpx;
        image,
        view {
          width: 160rpx;
          height: 160rpx;
          border-radius: 16rpx;
        }
      }
    }
  }
  .main-content {
    position: relative;
    .blank {
      height: 150rpx;
      background-color: #fff;
    }
    .control-table {
      position: absolute;
      top: -84rpx;
      width: 92vw;
      box-sizing: border-box;
      // min-height: 222rpx;
      margin: 0 32rpx;
      background-color: #fff;
      border-radius: 8rpx;
      box-shadow: 0 8rpx 24rpx 0 rgb(0 0 0 / 15%);
      .desc {
        padding: 22rpx 38rpx;
        line-height: 48rpx;
        min-height: 126rpx;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #888888;
        line-height: 40rpx;
      }
      .buttons {
        width: 100%;
        display: flex;
        justify-content: center;
        border-top: 1px solid rgb(0 0 0 / 5%);
        img {
          width: 48rpx;
          height: 48rpx;
          margin-right: 12rpx;
        }
        button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50%;
          height: 94rpx;
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #888888;
          &:first-child {
            // border-right: 1px solid rgb(0 0 0 / 5%);
          }
        }
        .button {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 32rpx 0;
          border: none;
          background-color: transparent;
          font-size: 24rpx;
        }
        .more {
          font-size: 28rpx;
        }
        .share {
        }
      }
    }
    .articleTotlal {
      padding-left: 32rpx;
      height: 44rpx;
      font-size: 28rpx;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #333333;
      line-height: 44rpx;
      margin-bottom: 20rpx;
    }
  }
}
button {
  background: none;
  font-size: 32rpx;
}
button::after {
  background: none;
  border: none;
}

</style>